<template>
<div class="tip custom-block"><p class="custom-block-title">TIP</p><p>只要你安装了 @element-plus/icons-vue，<strong>就可以在任意版本里使用 SVG 图标</strong>。</p><p><strong>您可以点击图标复制代码。</strong></p></div>
<div class="demo-icon-title" data-v-d2e47025="">System</div>
<div class="icon-div">
    <el-icon><Plus /></el-icon>
    <el-icon><Minus /></el-icon>
    <el-icon><CirclePlus /></el-icon>
    <el-icon><Search /></el-icon>
    <el-icon><Female /></el-icon>
    <el-icon><Male /></el-icon>
    <el-icon><Aim /></el-icon>
</div>
<div class="icon-div">
    <el-icon><House /></el-icon>
    <el-icon><FullScreen /></el-icon>
    <el-icon><Loading /></el-icon>
    <el-icon><Link /></el-icon>
    <el-icon><Service /></el-icon>
    <el-icon><Pointer /></el-icon>
    <el-icon><Star /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Notification /></el-icon>
    <el-icon><Connection /></el-icon>
    <el-icon><ChatDotRound /></el-icon>
    <el-icon><Setting /></el-icon>
    <el-icon><Clock /></el-icon>
    <el-icon><Position /></el-icon>
    <el-icon><Discount /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Odometer /></el-icon>
    <el-icon><ChatSquare /></el-icon>
    <el-icon><ChatRound /></el-icon>
    <el-icon><ChatLineRound /></el-icon>
    <el-icon><ChatLineSquare /></el-icon>
    <el-icon><ChatDotSquare /></el-icon>
    <el-icon><View /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Hide /></el-icon>
    <el-icon><Unlock /></el-icon>
    <el-icon><Lock /></el-icon>
    <el-icon><RefreshRight /></el-icon>
    <el-icon><RefreshLeft /></el-icon>
    <el-icon><Refresh /></el-icon>
    <el-icon><Bell /></el-icon>
</div>
<div class="icon-div">
    <el-icon><MuteNotification /></el-icon>
    <el-icon><User /></el-icon>
    <el-icon><Check /></el-icon>
    <el-icon><CircleCheck /></el-icon>
    <el-icon><Warning /></el-icon>
    <el-icon><CircleClose /></el-icon>
    <el-icon><Close /></el-icon>
</div>
<div class="icon-div">
    <el-icon><PieChart /></el-icon>
    <el-icon><More /></el-icon>
    <el-icon><Compass /></el-icon>
    <el-icon><Filter /></el-icon>
    <el-icon><Switch /></el-icon>
    <el-icon><Select /></el-icon>
    <el-icon><SemiSelect /></el-icon>
</div>
<div class="icon-div">
    <el-icon><CloseBold /></el-icon>
    <el-icon><EditPen /></el-icon>
    <el-icon><Edit /></el-icon>
    <el-icon><Message /></el-icon>
    <el-icon><MessageBox /></el-icon>
    <el-icon><TurnOff /></el-icon>
    <el-icon><Finished /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Delete /></el-icon>
    <el-icon><Crop /></el-icon>
    <el-icon><SwitchButton /></el-icon>
    <el-icon><Operation /></el-icon>
    <el-icon><Open /></el-icon>
    <el-icon><Remove /></el-icon>
    <el-icon><ZoomOut /></el-icon>
</div>
<div class="icon-div">
    <el-icon><ZoomIn /></el-icon>
    <el-icon><InfoFilled /></el-icon>
    <el-icon><CircleCheckFilled /></el-icon>
    <el-icon><SuccessFilled /></el-icon>
    <el-icon><WarningFilled /></el-icon>
    <el-icon><CircleCloseFilled /></el-icon>
    <el-icon><QuestionFilled /></el-icon>
</div>
<div class="icon-div">
    <el-icon><WarnTriangleFilled /></el-icon>
    <el-icon><UserFilled /></el-icon>
    <el-icon><MoreFilled /></el-icon>
    <el-icon><Tools /></el-icon>
    <el-icon><HomeFilled /></el-icon>
    <el-icon><Menu /></el-icon>
    <el-icon><UploadFilled /></el-icon>
 </div>
<div class="icon-div">
    <el-icon><Avatar /></el-icon>
    <el-icon><HelpFilled /></el-icon>
    <el-icon><Share /></el-icon>
    <el-icon><StarFilled /></el-icon>
    <el-icon><Comment /></el-icon>
    <el-icon><Histogram /></el-icon>
    <el-icon><Grid /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Promotion /></el-icon>
    <el-icon><DeleteFilled /></el-icon>
    <el-icon><RemoveFilled /></el-icon>
    <el-icon><CirclePlusFilled /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Arrow</div>
<div class="icon-div">
    <el-icon><ArrowLeft /></el-icon>
    <el-icon><ArrowUp /></el-icon>
    <el-icon><ArrowRight /></el-icon>
    <el-icon><ArrowDown /></el-icon>
    <el-icon><ArrowLeftBold /></el-icon>
    <el-icon><ArrowUpBold /></el-icon>
    <el-icon><ArrowRightBold /></el-icon>
</div>
<div class="icon-div">
    <el-icon><ArrowDownBold /></el-icon>
    <el-icon><DArrowRight /></el-icon>
    <el-icon><DArrowLeft /></el-icon>
    <el-icon><Download /></el-icon>
    <el-icon><Upload /></el-icon>
    <el-icon><Top /></el-icon>
    <el-icon><Bottom /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Back /></el-icon>
    <el-icon><Right /></el-icon>
    <el-icon><TopRight /></el-icon>
    <el-icon><TopLeft /></el-icon>
    <el-icon><BottomRight /></el-icon>
    <el-icon><BottomLeft /></el-icon>
    <el-icon><Sort /></el-icon>
</div>
<div class="icon-div">
    <el-icon><SortUp /></el-icon>
    <el-icon><SortDown /></el-icon>
    <el-icon><Rank /></el-icon>
    <el-icon><CaretLeft /></el-icon>
    <el-icon><CaretTop /></el-icon>
    <el-icon><CaretRight /></el-icon>
    <el-icon><CaretBottom /></el-icon>
</div>
<div class="icon-div">
    <el-icon><DCaret /></el-icon>
    <el-icon><Expand /></el-icon>
    <el-icon><Fold /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Document</div>
<div class="icon-div">
    <el-icon><DocumentAdd /></el-icon>
    <el-icon><Document /></el-icon>
    <el-icon><Notebook /></el-icon>
    <el-icon><Tickets /></el-icon>
    <el-icon><Memo /></el-icon>
    <el-icon><Collection /></el-icon>
    <el-icon><Postcard /></el-icon>
</div>
<div class="icon-div">
    <el-icon><ScaleToOriginal /></el-icon>
    <el-icon><SetUp /></el-icon>
    <el-icon><DocumentDelete /></el-icon>
    <el-icon><DocumentChecked /></el-icon>
    <el-icon><DataBoard /></el-icon>
    <el-icon><DataAnalysis /></el-icon>
    <el-icon><CopyDocument /></el-icon>
</div>
<div class="icon-div">
    <el-icon><FolderChecked /></el-icon>
    <el-icon><Files /></el-icon>
    <el-icon><Folder /></el-icon>
    <el-icon><FolderDelete /></el-icon>
    <el-icon><FolderRemove /></el-icon>
    <el-icon><FolderOpened /></el-icon>
    <el-icon><DocumentCopy /></el-icon>
</div>
<div class="icon-div">
    <el-icon><DocumentRemove /></el-icon>
    <el-icon><FolderAdd /></el-icon>
    <el-icon><FirstAidKit /></el-icon>
    <el-icon><Reading /></el-icon>
    <el-icon><DataLine /></el-icon>
    <el-icon><Management /></el-icon>
    <el-icon><Checked /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Ticket /></el-icon>
    <el-icon><Failed /></el-icon>
    <el-icon><TrendCharts /></el-icon>
    <el-icon><List /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Media</div>
<div class="icon-div">
    <el-icon><Microphone /></el-icon>
    <el-icon><Mute /></el-icon>
    <el-icon><Mic /></el-icon>
    <el-icon><VideoPause /></el-icon>
    <el-icon><VideoCamera /></el-icon>
    <el-icon><VideoPlay /></el-icon>
    <el-icon><Headset /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Monitor /></el-icon>
    <el-icon><Film /></el-icon>
    <el-icon><Camera /></el-icon>
    <el-icon><Picture /></el-icon>
    <el-icon><PictureRounded /></el-icon>
    <el-icon><Iphone /></el-icon>
    <el-icon><Cellphone /></el-icon>
</div>
<div class="icon-div">
    <el-icon><VideoCameraFilled /></el-icon>
    <el-icon><PictureFilled /></el-icon>
    <el-icon><Platform /></el-icon>
    <el-icon><CameraFilled /></el-icon>
    <el-icon><BellFilled /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Traffic</div>
<div class="icon-div">
    <el-icon><Location /></el-icon>
    <el-icon><LocationInformation /></el-icon>
    <el-icon><DeleteLocation /></el-icon>
    <el-icon><Coordinate /></el-icon>
    <el-icon><Bicycle /></el-icon>
    <el-icon><OfficeBuilding /></el-icon>
    <el-icon><School /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Guide /></el-icon>
    <el-icon><AddLocation /></el-icon>
    <el-icon><MapLocation /></el-icon>
    <el-icon><Place /></el-icon>
    <el-icon><LocationFilled /></el-icon>
    <el-icon><Van /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Food</div>
<div class="icon-div">
    <el-icon><Watermelon /></el-icon>
    <el-icon><Pear /></el-icon>
    <el-icon><NoSmoking /></el-icon>
    <el-icon><Smoking /></el-icon>
    <el-icon><Mug /></el-icon>
    <el-icon><GobletSquareFull /></el-icon>
    <el-icon><GobletFull /></el-icon>
</div>
<div class="icon-div">
    <el-icon><KnifeFork /></el-icon>
    <el-icon><Sugar /></el-icon>
    <el-icon><Bowl /></el-icon>
    <el-icon><MilkTea /></el-icon>
    <el-icon><Lollipop /></el-icon>
    <el-icon><Coffee /></el-icon>
    <el-icon><Chicken /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Dish /></el-icon>
    <el-icon><IceTea /></el-icon>
    <el-icon><ColdDrink /></el-icon>
    <el-icon><CoffeeCup /></el-icon>
    <el-icon><DishDot /></el-icon>
    <el-icon><IceDrink /></el-icon>
    <el-icon><IceCream /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Dessert /></el-icon>
    <el-icon><IceCreamSquare /></el-icon>
    <el-icon><ForkSpoon /></el-icon>
    <el-icon><IceCreamRound /></el-icon>
    <el-icon><Food /></el-icon>
    <el-icon><HotWater /></el-icon>
    <el-icon><Grape /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Fries /></el-icon>
    <el-icon><Apple /></el-icon>
    <el-icon><Burger /></el-icon>
    <el-icon><Goblet /></el-icon>
    <el-icon><GobletSquare /></el-icon>
    <el-icon><Orange /></el-icon>
    <el-icon><Cherry /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Items</div>
<div class="icon-div">
    <el-icon><Printer /></el-icon>
    <el-icon><Calendar /></el-icon>
    <el-icon><CreditCard /></el-icon>
    <el-icon><Box /></el-icon>
    <el-icon><Money /></el-icon>
    <el-icon><Refrigerator /></el-icon>
    <el-icon><Cpu /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Football /></el-icon>
    <el-icon><Brush /></el-icon>
    <el-icon><Suitcase /></el-icon>
    <el-icon><SuitcaseLine /></el-icon>
    <el-icon><Umbrella /></el-icon>
    <el-icon><AlarmClock /></el-icon>
    <el-icon><Medal /></el-icon>
</div>
<div class="icon-div">
    <el-icon><GoldMedal /></el-icon>
    <el-icon><Present /></el-icon>
    <el-icon><Mouse /></el-icon>
    <el-icon><Watch /></el-icon>
    <el-icon><QuartzWatch /></el-icon>
    <el-icon><Magnet /></el-icon>
    <el-icon><Help /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Soccer /></el-icon>
    <el-icon><ToiletPaper /></el-icon>
    <el-icon><ReadingLamp /></el-icon>
    <el-icon><Paperclip /></el-icon>
    <el-icon><MagicStick /></el-icon>
    <el-icon><Basketball /></el-icon>
    <el-icon><Baseball /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Coin /></el-icon>
    <el-icon><Goods /></el-icon>
    <el-icon><Sell /></el-icon>
    <el-icon><SoldOut /></el-icon>
    <el-icon><Key /></el-icon>
    <el-icon><ShoppingCart /></el-icon>
    <el-icon><ShoppingCartFull /></el-icon>
</div>
<div class="icon-div">
    <el-icon><ShoppingTrolley /></el-icon>
    <el-icon><Phone /></el-icon>
    <el-icon><Scissor /></el-icon>
    <el-icon><Handbag /></el-icon>
    <el-icon><ShoppingBag /></el-icon>
    <el-icon><Trophy /></el-icon>
    <el-icon><TrophyBase /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Stopwatch /></el-icon>
    <el-icon><Timer /></el-icon>
    <el-icon><CollectionTag /></el-icon>
    <el-icon><TakeawayBox /></el-icon>
    <el-icon><PriceTag /></el-icon>
    <el-icon><Wallet /></el-icon>
    <el-icon><Opportunity /></el-icon>
</div>
<div class="icon-div">
    <el-icon><PhoneFilled /></el-icon>
    <el-icon><WalletFilled /></el-icon>
    <el-icon><GoodsFilled /></el-icon>
    <el-icon><Flag /></el-icon>
    <el-icon><BrushFilled /></el-icon>
    <el-icon><Briefcase /></el-icon>
    <el-icon><Stamp /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Weather</div>
<div class="icon-div">
    <el-icon><Sunrise /></el-icon>
    <el-icon><Sunny /></el-icon>
    <el-icon><Ship /></el-icon>
    <el-icon><MostlyCloudy /></el-icon>
    <el-icon><PartlyCloudy /></el-icon>
    <el-icon><Sunset /></el-icon>
    <el-icon><Drizzling /></el-icon>
</div>
<div class="icon-div">
    <el-icon><Pouring /></el-icon>
    <el-icon><Cloudy /></el-icon>
    <el-icon><Moon /></el-icon>
    <el-icon><MoonNight /></el-icon>
    <el-icon><Lightning /></el-icon>
</div>
<div class="demo-icon-title" data-v-d2e47025="">Other</div>
<div class="icon-div">
    <el-icon><ChromeFilled /></el-icon>
    <el-icon><Eleme /></el-icon>
    <el-icon><ElemeFilled /></el-icon>
    <el-icon><ElementPlus /></el-icon>
    <el-icon><Shop /></el-icon>
    <el-icon><SwitchFilled /></el-icon>
    <el-icon><WindPower /></el-icon>
</div>
</template>
<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>
<style>
.icon-div .el-icon {
    margin:20px;
}
</style>